<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Demo - PayPal JS</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
    <script src="https://www.paypal.com/sdk/js?client-id=sb"></script>
  </head>
  <body>
    <div id="container">
      <app></app>
    </div>
    <script type="text/babel">
      const PayPalButton = paypal.Buttons.driver("vue", window.Vue);

      Vue.component("app", {
        template: `
          <paypal-buttons :on-approve="onApprove" :create-order="createOrder" />
        `,
        components: {
          "paypal-buttons": PayPalButton,
        },

        computed: {
          createOrder: function () {
            return (data, actions) => {
              return actions.order.create({
                purchase_units: [
                  {
                    amount: {
                      value: "10",
                    },
                  },
                ],
              });
            };
          },
          onApprove: function () {
            return (data, actions) => {
              return actions.order.capture();
            };
          },
        },
      });

      const vm = new Vue({
        el: "#container",
      });
    </script>
  </body>
</html>
